<template>
  <div class="clock">
    <div class="time">
      <!-- 小时部分 -->
      <div class="digit-container">
        <div class="digit">{{ hours }}</div>
      </div>
      <div class="separator">:</div>

      <!-- 分钟部分 -->
      <div class="digit-container">
        <div class="digit">{{ minutes }}</div>
      </div>
      <div class="separator">:</div>

      <!-- 秒钟部分 -->
      <div class="digit-container">
        <div class="digit">{{ seconds }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 定义时间状态
const hours = ref("00");
const minutes = ref("00");
const seconds = ref("00");

// 格式化时间为两位数
const formatTime = (time) => {
  return time < 10 ? `0${time}` : time.toString();
};

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const h = formatTime(now.getHours());
  const m = formatTime(now.getMinutes());
  const s = formatTime(now.getSeconds());

  hours.value = h;
  minutes.value = m;
  seconds.value = s;
};

// 在组件挂载时启动定时器
onMounted(() => {
  updateTime(); // 初始化时间
  setInterval(updateTime, 1000); // 每秒更新时间
});
</script>

<style scoped>
.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 3rem;
}

.time {
  display: flex;
  align-items: center;
}

.digit-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 100px;
  margin: 0 10px;
}

.digit {
  font-size: 4rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.separator {
  font-size: 3rem;
  color: #ffffff;
  padding: 0 5px;
}
</style>
